﻿<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
        <link rel="stylesheet" href="css/bootstrap-select.css">
        <script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> 
        <script type="text/javascript" src="js/bootstrap-select.js"></script> 
    </head>
    <body>

    <!--data-max-options="2"  data-selected-text-format="count"-->

<h3>带分组，可多选，有限制</h3>
<select class="selectpicker" title="请选择" multiple data-live-search="true" data-style="btn-primary" data-actions-box="true">
  <optgroup label="Condiments" data-max-options="2">
    <option title="Combo 1" data-tokens="mustard">Mustard</option>
    <option  data-tokens="Ketchup">Ketchup</option>
    <option>Relish</option>
  </optgroup>
  <optgroup label="Breads" data-max-options="2">
    <option>Plain</option>
    <option>Steamed</option>
    <option>Toasted</option>
  </optgroup>
</select>


    <h3>2</h3>
    <select class="selectpicker" title="请选择" multiple data-live-search="true" data-style="btn-info" data-actions-box="true">
        <optgroup label="Condiments" data-max-options="2">
            <option title="Combo 1" data-tokens="mustard">Mustard</option>
            <option  data-tokens="Ketchup">Ketchup</option>
            <option>Relish</option>
        </optgroup>
        <optgroup label="Breads" data-max-options="2">
            <option>Plain</option>
            <option>Steamed</option>
            <option>Toasted</option>
        </optgroup>
    </select>

    <h3>3</h3>
    <select class="selectpicker" title="请选择" multiple data-live-search="true" data-style="btn-success">
        <optgroup label="Condiments" data-max-options="2">
            <option title="Combo 1" data-tokens="mustard">Mustard</option>
            <option  data-tokens="Ketchup">Ketchup</option>
            <option>Relish</option>
        </optgroup>
        <optgroup label="Breads" data-max-options="2">
            <option>Plain</option>
            <option>Steamed</option>
            <option>Toasted</option>
        </optgroup>
    </select>



<h3>选中后带对号</h3>
<select class="selectpicker show-tick">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<h3>下拉列表顶部带三角</h3>
<select class="selectpicker show-menu-arrow">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<h3>利用bootstrap网格结构</h3>
<div class="row">
  <div class="col-xs-3">
    <div class="form-group">
      <select class="selectpicker form-control">
        <option>Mustard</option>
        <option>Ketchup</option>
        <option>Relish</option>
      </select>
    </div>
  </div>
</div>

<h3>控制宽度</h3>
<select class="selectpicker" data-width="auto">
   <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>
<select class="selectpicker" data-width="fit">
   <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>
<select class="selectpicker" data-width="260px">
   <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>
<select class="selectpicker" data-width="75%">
   <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

<h3>带图标</h3>
<select class="selectpicker">
  <option data-icon="glyphicon-heart">Ketchup</option>
</select>

<h3>自定义标签</h3>
<select class="selectpicker">
  <option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>


<h3>带全部选中和全部删除按钮</h3>
<select class="selectpicker" multiple >
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>




    </body>
</html>